在準備幫專案的人物貼上皮膚前，今天先來了解一下材質的種類以及屬性吧！

Photo by Patrick Tomasso on Unsplash

這是本系列第 07 篇，如果還沒看過第 06 篇可以點以下連結前往：

用 Three.js 來當個創世神 (06)：專案實作#3 - OrbitControls、stats.js

材質種類

前面有提過材質（material）是物體（object）表面除了幾何體（geometry）以外所有可視屬性的集合，像是顏色（color）、紋理（texture）、透明度（opacity）、發光度（shininess）、鏡面反射程度（specular）等等。

在 Three.js 中有以下幾種常用的材質：

材質	說明	圖示
MeshBasicMaterial	網面基礎材質。賦予幾何體一個簡單的顏色，不考慮場景中光源的影響。
MeshNormalMaterial	網面法向材質。透過法向量（與面垂直的向量）計算物體表面的顏色，也不受光源影響。
MeshLambertMaterial	網面朗伯特材質。受光源影響，常用於創建暗淡不光亮的物體。
MeshPhongMaterial	網面馮氏材質。受光源影響，常用於創建光亮的物體。
MeshStandardMaterial	網面標準材質。基於 PBR（Physically Based Rendering）計算出來的材質，透過更複雜的算法讓物體更能反應在真實物理環境的外觀。

材質比較

基礎材質

依據筆者的理解， MeshBasicMaterial 與 MeshNormalMaterial 主要被用在開發過程中的實驗上，由於他們不受光源影響，可以在還沒設置光源到場景中時，使用這兩種材質測試物體是否能正確顯示到畫面中，或是在除錯過程中能排除光源的問題，對材質進行測試。

高級材質

在範例中常會看到 MeshLambertMaterial 與 MeshPhongMaterial，這兩種材質都能與光源有互動，但兩者根據不同的著色算法，會呈現不同的感覺，前者是較黯淡粗糙的塑膠感，後者則是較光亮平滑的金屬感，主要的差異在於馮氏材質具有 鏡面反射（specular） 這個屬性，這個屬性可以指定高光的反射顏色，讓物體更具金屬感。

而在查官網文件時，看到兩個相對比較新的材質分別是 MeshStandardMaterial 與 MeshPhysicalMaterial，比起朗伯特與馮氏只是透過近似值來模擬光與材質間的互動，MeshStandardMaterial 使用更複雜的算法，讓物體更具真實感，甚至可以設定金屬感（metalness）與粗糙度（roughness）。

MeshPhysicalMaterial 則是由前者延伸出來的材質，但多了一個 反射率（reflectivity）的屬性，讓調整的彈性更大。

材質屬性

材質的屬性非常之多，這邊只簡單介紹每個材質共用且常見的幾個，更高級的材質還可以設定像是反射率（specular）、亮度（shininess）、材質發散色彩（emissive）等等，建議需要調整細節時再到官網查詢即可！

今日小結

今天介紹各種材質種類、比較與共同屬性，由於都是 API 的替換，規劃明天會透過專案實作來實際展示如何幫苦力怕貼上皮膚，我們明天見！